<template>
	<sysJk :label="'2.报警信息查看及报警部位确定'" showBack :withoutTop="true" :leftTime="180">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;" v-if="examType==1">
					{{questionList[showQuestion-1]}}
				</view>
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;" v-else>
					{{testQuestionList[showQuestion-1]}}
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl"  style="width:100%;height:100%;display: block;">
					</image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							<image v-if="showQuestion==1&&showPic==2" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/back.png'" :style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<image v-if="showQuestion==1&&showPic==2" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/green.png'" :style="{left:425*widthBl+'px',top:390*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<view class="handleBtn">
								<!-- <van-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</van-button> -->
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
								<!-- <van-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</van-button> -->
							</view>
							<view class="btnArea">
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handle">提交</u-button>
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="goBack">返回</u-button>
							</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop,width:100*widthBl+'px',height:100*heightBl+'px'}"
								@tap="showDialog" v-if="showPic==1&&(showQuestion==1||showQuestion==3)">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="writeBox2" :style="{left:1195*widthBl+'px',top:430*heightBl+'px',width:100*widthBl+'px',height:100*heightBl+'px'}"
								@tap="toControl" v-if="showPic==1&&(showQuestion==2||showQuestion==4)">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox" :style="{right:50*widthBl+'px',top:50*heightBl+'px'}" @tap="closeBack"
								v-if="showPic==2||showPic==3||showPic==4||showPic==5">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="f1Btn"
								:style="{left:1030*widthBl+'px',top:470*heightBl+'px',width:80*widthBl+'px',height:40*heightBl+'px'}"
								@tap="showInfoIndex=1" v-if="showPic==2">
												
							</view>
							<view class="writeBox" id="f2Btn"
								:style="{left:1130*widthBl+'px',top:470*heightBl+'px',width:80*widthBl+'px',height:40*heightBl+'px'}"
								@tap="showInfoIndex=2" v-if="showPic==2">
												
							</view>
							<view class="writeBox" id="f3Btn"
								:style="{left:1230*widthBl+'px',top:470*heightBl+'px',width:80*widthBl+'px',height:40*heightBl+'px'}"
								@tap="showInfoIndex=3" v-if="showPic==2">
												
							</view>
							<view class="writeBox" id="f4Btn"
								:style="{left:1325*widthBl+'px',top:470*heightBl+'px',width:80*widthBl+'px',height:40*heightBl+'px'}"
								@tap="showInfoIndex=4" v-if="showPic==2">
					
							</view>
							<view class="writeBox" id="f5Btn"
								:style="{left:1420*widthBl+'px',top:470*heightBl+'px',width:80*widthBl+'px',height:40*heightBl+'px'}"
								@tap="showInfoIndex=5" v-if="showPic==2">
												
							</view>
							<view class="writeBox" id="f6Btn" v-if="showPic==2&&showInfoIndex" :style="{left:1520*widthBl+'px',top:470*heightBl+'px',width:85*widthBl+'px',height:40*heightBl+'px'}" @tap="showInfoIndex=null"></view>
							<view class="writeBox" id="selectFire"
								:style="{left:660*widthBl+'px',top:110*heightBl+'px',width:110*widthBl+'px',height:40*heightBl+'px',color:'#000',fontSize:'1.5vh'}"
								@tap="selectFire" v-if="showPic==3||showPic==4||showPic==5">
								<view :class="showPic==3?'whiteFont':''">
									火警信息
								</view>
							</view>
							<view class="writeBox" v-if="showPic==2" id="timeBox" :style="{left:380*widthBl+'px',top:90*heightBl+'px',width:215*widthBl+'px',height:75*heightBl+'px'}" @tap="showDialog" style="text-align: center;">
								<text style="color:red">{{showTime}}</text> 
							</view>
							<view class="writeBox" id="selectErr"
								:style="{left:775*widthBl+'px',top:110*heightBl+'px',width:110*widthBl+'px',height:40*heightBl+'px',color:'#000',fontSize:'1.5vh'}"
								@tap="selectErr" v-if="showPic==3||showPic==4||showPic==5">
								<view :class="showPic==4?'whiteFont':''">
									故障信息
								</view>
							</view>
							<view class="writeBox" id="selectDetect"
								:style="{left:890*widthBl+'px',top:110*heightBl+'px',width:110*widthBl+'px',height:40*heightBl+'px',color:'#000',fontSize:'1.5vh'}"
								@tap="selectDetect" v-if="showPic==3||showPic==4||showPic==5">
								<view :class="showPic==5?'whiteFont':''">
									监管信息
								</view>
							</view>
							<view class="writeBox" id="selectDetect"
								:style="{left:1140*widthBl+'px',top:195*heightBl+'px',width:135*widthBl+'px',height:70*heightBl+'px',color:'#000',fontSize:'1.5vh'}"
								 v-if="showPic==3||showPic==4||showPic==5">
								<view class="desc" style="width:100%;height:100%;white-space: warp;font-size:1.5vh" v-if="showPic==3">
									<text>火灾报警-线型红外感烟探测器一层走廊</text>
								</view>
								<view class="desc" style="width:100%;height:100%;white-space: warp;font-size:1.5vh" v-if="showPic==4">
									<text>故障部位-消防电梯故障一层消防控制室</text>
								</view>
								<view class="desc" style="width:100%;height:100%;white-space: warp;font-size:1.5vh" v-if="showPic==5">
									<text>监管信息-水流指示器监管报警一层停车场西侧</text>
								</view>
							</view>
							<view class="writeBox" id="selectDetect"
								:style="{left:700*widthBl+'px',top:195*heightBl+'px',width:135*widthBl+'px',height:70*heightBl+'px',color:'#000',fontSize:'1.5vh'}"
								 v-if="showPic==3||showPic==4||showPic==5">
								{{showDate3}}
							</view>
							<view class="writeBox" id="selectDetect"
								:style="{left:410*widthBl+'px',top:75*heightBl+'px',width:210*widthBl+'px',height:220*heightBl+'px',color:'#000',fontSize:'1vh'}"
								 v-if="showPic==3||showPic==4||showPic==5">
								<view class="descMainInfo" v-if="showPic==3" style="display:flex;flex-direction:column;font-size:1vh">
									<text>时间：{{showDate2}}</text>
									<text>编号：1-1</text>
									<text>描述：火灾报警</text>
									<text>线型红外感烟探测器</text>
									<text>一层走廊</text>
									<text>设备类型：红外感烟探测</text>
								</view>
								<view class="descMainInfo" v-if="showPic==4" style="display:flex;flex-direction:column;font-size:1vh">
									<p>时间：{{showDate2}}</p>
									<p>编号：1-1</p>
									<p>描述：故障部位</p>
									<p>消防电梯故障</p>
									<p>一层消防控制室</p>
									<p>设备类型：消防电梯</p>
								</view>
								<view class="descMainInfo" v-if="showPic==5" style="display:flex;flex-direction:column;font-size:1vh">
									<p>时间：{{showDate2}}</p>
									<p>编号：1-1</p>
									<p>描述：监管信息</p>
									<p>水流指示器监管报警</p>
									<p>一层停车场西侧</p>
									<p>设备类型：水流指示器</p>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==1" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请判断火警信息的具体部位
								</view>
								<view class="answerSelect">
					
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==2" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请判断火警信息的具体部位
								</view>
								<view class="answerSelect">
					
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==3" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请判断故障信息的具体部位
								</view>
								<view class="answerSelect">
												
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==4" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请通过图形显示装置，查看故障信息的具体部位
								</view>
								<view class="answerSelect">
												
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items3"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items:center">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="showInfoBox" id="showInfoBox" v-if="showPic==2&&!f5Flag"
								:style="{left:showInfoBox.left,top:showInfoBox.top,width:510*widthBl+'px',}"
								@tap="showDialog">
								
								<view class="" style="color:#fff" :style="{height:30*heightBl+'px'}">
									<text v-if="showInfoIndex==1||!showInfoIndex">火警信息</text>
									<text v-if="showInfoIndex==2">启动信息</text>
									<text v-if="showInfoIndex==3">故障信息</text>
									<text v-if="showInfoIndex==4">监管信息</text>
									<text v-if="showInfoIndex==5">屏蔽信息</text>
								</view>
								<view class="" style="display: flex;">
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',}"
										style="display: flex;flex-direction: column;justify-content: flex-start;" v-if="showInfoIndex==1||!showInfoIndex">
										<view class="" style="text-align:left">
											首警：{{showDate}}
										</view>
										<view class="" style="text-align:left">
											1-1 点型感烟火灾探测器火警/负一层停车场西侧
										</view>
										<!-- <view class="" style="text-align:left">
											负一层电梯旁
										</view> -->
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',}"
										style="display: flex;flex-direction: column;justify-content: flex-start;" v-if="showInfoIndex==3">
										<view class="" style="text-align:left">
											{{showDate}}
										</view>
										<view class="" style="text-align:left">
											1-2 点消防电梯故障101室内
										</view>
										
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',}"
										style="display: flex;flex-direction: column;justify-content: flex-start;" v-if="showInfoIndex==4||showInfoIndex==2">
										
										
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',}"
										style="display: flex;flex-direction: column;justify-content: flex-start;" v-if="showInfoIndex==5">
										<view class="" style="text-align:left">
											{{showDate}}
										</view>
										<view class="" style="text-align:left">
											1-2 点型感烟火灾探测器屏蔽一层前室
										</view>
										
									</view>
									<view class="" :style="{width:150*widthBl+'px',height:200*heightBl+'px',padding:10*widthBl+'px',boxSizing:'border-box',paddingBottom:0}" style="display:flex;flex-direction:column;justify-content: space-between;">
										<view class="" :style="{height:80*heightBl+'px'}">
											<view class="">
												正常 运行
											</view>
											<view class=""> 
												手动： 允许
											</view>
											<view class="">
												自动：{{handleByAutoFlag?'允许':'禁止'}}
											</view>
										</view>
										<view class=""  id="timechangeBox" style="text-align: center;color:#fff;font-size: 1vh;" >
											<view class="dateInfo">
												{{formatTime(new Date(),'yyyy-MM-dd')}}
											</view>
											<view class="timeInfo">
												{{changedTime}}
											</view>
										</view>
										
									</view>
								</view>
								<view class="" style="color:#fff" :style="{fontSize:1.5+'vh'}" v-if="!showInfoIndex">
									F1查火警 F2查启动 F3查故障 F4查监管 F5查屏蔽 F6查反馈
								</view>
								<view class="" style="color:#fff" :style="{fontSize:1.5+'vh'}" v-else>
									F1页001 F2上一页 F3下一页   F6退出
								</view>
							</view>
							<view class="showInfoBox" id="showInfoBox" v-if="showPic==2&&f5Flag"
								:style="{left:showInfoBox.left,top:showInfoBox.top,width:510*widthBl+'px',}"
								@tap="showDialog">
								<view class="" style="color:#fff" :style="{height:30*heightBl+'px'}">
									屏蔽信息
								</view>
								<view class="" style="display: flex;">
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',}"
										style="display: flex;flex-direction: column;justify-content: flex-start;">
										<view class="" style="text-align:left">
											{{showDate}}
										</view>
										<view class="" style="text-align:left">
											1-2 手动报警按钮火灾101室
										</view>
										<!-- <view class="" style="text-align:left">
											负一层电梯旁
										</view> -->
					
					
									</view>
									<view class="" :style="{width:150*widthBl+'px',padding:10*widthBl+'px',boxSizing:'border-box',paddingBottom:0}" style="display:flex;flex-direction:column;justify-content: space-between;">
										<view class="" :style="{height:160*heightBl+'px'}">
											<view class="">
												正常 运行
											</view>
											<view class="">
												手动： 允许
											</view>
											<view class="">
												自动：{{handleByAutoFlag?'允许':'禁止'}}
											</view>
										</view>
										<view class=""  id="timechangeBox" style="text-align: center;color:#fff" :style="{fontSize:'1vh'}">
											<view class="dateInfo">
												{{formatTime(new Date(),'yyyy-MM-dd')}}
											</view>
											<view class="timeInfo">
												{{changedTime}}
											</view>
										</view>
										
									</view>
								</view>
								<view class="" style="color:#fff" >
									F1查火警 F2查启动 F3查故障 F4查监管 F5查屏蔽 F6查反馈
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								{{analysList[showQuestion-1]}}
							</view>
							<view class="overtitle" v-if="showQuestion==1">
								正确答案：点型感烟火灾探测器火警/负一层停车场西侧
							</view>
							<view class="overtitle" v-if="showQuestion==2">
								正确答案：线型红外感烟探测器一层走廊
							</view>
							<view class="overtitle" v-if="showQuestion==3">
								正确答案：消防电梯故障 101室
							</view>
							<view class="overtitle" v-if="showQuestion==4">
								正确答案：消防电梯故障 一层消防控制室
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {formatTime} from '@/util/index.js'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
		onLoad() {
			uni.setScreenBrightness({
				keepScreenOn: true,
				direction: 'landscape',
				success() {
					console.log("a")
				}
			})
		},
		data() {


			return {
				// widthBl:0,
				// heightBl:0,
				startTime:(new Date().getTime())/1000,
				examType: 1,
				writeBox:{width:0,height:0},
				writeBoxLeft: 0,
				showInfoBox: {},
				writeBoxTop: 0,
				showFlag: false,
				formatTime,
				widthBl: 0,
				heightBl: 0,
				showPic: 1,
				f5Flag: false,
				result: '',
				requestUrl:baseUrl,
				bUrl: baseUrl + "/static/image/jk/2-1.jpg",
				showWrite: true,
				questionList: [
					'【1/4】请通过火灾报警控制器，查看火警信息的具体部位',
					'【2/4】请通过火灾报警控制器，查看火警信息的具体部位',
					'【3/4】请通过火灾报警控制器，查看故障信息的具体部位',
					'【4/4】请通过火灾报警控制器，查看故障信息的具体部位',
				],
				testQuestionList:[
					'【1/2】请通过火灾报警控制器，查看火警信息的具体部位',
					'【2/2】请通过火灾报警控制器，查看火警信息的具体部位',
				],
				showQuestion: 1,
				items: [{
						name: '点型感烟火灾探测器火警/负一层停车场西侧',
						value: '点型感烟火灾探测器火警/负一层停车场西侧',
					},
					{
						name: '消防电梯故障 101室',
						value: '消防电梯故障 101室',
					},
					{
						name: '点型感烟火灾探测器屏蔽 一层前室',
						value: '点型感烟火灾探测器屏蔽 一层前室',
					}
				],
				items2: [{
						name: '点型感烟火灾探测器火警 一层前室',
						value: '点型感烟火灾探测器火警 一层前室',
					},
					{
						name: '手动报警按钮火警 101室',
						value: '手动报警按钮火警 101室',
					},
					{
						name: '线型红外感烟探测器 一层走廊',
						value: '线型红外感烟探测器 一层走廊',
					},
				],
				items3: [{
						name: '点型感烟火灾探测器火警 一层前室',
						value: '点型感烟火灾探测器火警 一层前室',
					},
					{
						name: '手动报警按钮火警 101室',
						value: '手动报警按钮火警 101室',
					},
					{
						name: '消防电梯故障 一层消防控制室',
						value: '消防电梯故障 一层消防控制室',
					},
				],
				analysList:[
					'题目要求查某种信息，按对应的F1、F2、F3、F4、F5、F6，就能得到答案',
					'题目要求查某种信息，用直接点击图形显示装置的信息就能得到答案',
					'题目要求查某种信息，按对应的F1、F2、F3、F4、F5、F6，就能得到答案',
					'题目要求查某种信息，用直接点击图形显示装置的信息就能得到答案',
				],
				handleByAutoFlag:false,
				showInfoIndex:null,
				showTime:null,
				showDate:null,
				changedTime:null,
				showDate2:null,
				showDate3:null,
				allScore:0
			}
		},
		onLoad(option) {
			this.examType = option.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#warp')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onShow() {
			this.createTime()
		},
		onReady() {
			this.$nextTick(function(){
				this.drawWhiteBox()
			})
		},
		methods: {
			createTime(){
				// this.showTime=this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				let that = this
				// this.showTime = this.formatTime(new Date(),'HH:mm')
				this.showDate = this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				this.showDate2 = this.formatTime(new Date(),'yy.MM.dd HH:mm')
				this.showDate3 = this.formatTime(new Date(),'yy-MM-dd HH:mm:ss')
				setInterval(function(){
						that.showTime = that.formatTime(new Date(),'HH:mm')
						that.changedTime = that.formatTime(new Date(),'HH:mm:ss')
				},1000)
			},
			goBack() {
				uni.navigateBack()
			},
			onChange(e) {
				this.result = e.detail.value
			},
			selectDetect() {
				this.bUrl = baseUrl + "/static/image/jk/2-4-3.jpg"
				this.showPic = 5
			},
			selectErr() {
				this.bUrl = baseUrl + "/static/image/jk/2-4-2.jpg"
				this.showPic = 4
			},
			selectFire() {
				this.bUrl = baseUrl + "/static/image/jk/2-4-1.jpg"
				this.showPic = 3
			},
			toControl() {
				this.bUrl = baseUrl + "/static/image/jk/2-4-1.jpg"
				this.showPic = 3
			},
			redo(){
				this.result = null
				
				this.bUrl = baseUrl + "/static/image/jk/2-1.jpg"
				this.showPic = 1
				this.f5Flag = false
				this.showInfoIndex=null
				
				
			},
			handle() {
				let that = this
				let score = 0
				let isCorrect = false
				if(!that.result){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
					return
				}
				if(that.showQuestion==1){
					if(that.result==that.items[0].value){
						score = 2
						isCorrect = true
					}
				}else if(that.showQuestion==2){
					if(that.result==that.items2[2].value){
						score = 2
						isCorrect = true
					}
				}
				let handleObj = {
					fz_id: that.examId,
					title: '',
					no: '2-'+that.showQuestion,
					question_type: 1,
					user_answer: that.result,
					answer: '',
					is_correct: isCorrect,
					score: score,
					start_time: that.startTime,
					end_time: (new Date().getTime()/1000),
					question_answer: ''
				}
				if(that.showQuestion==1){
					handleObj.title = '请通过火灾报警控制器，查看火警信息的具体部位'
				}else if(that.showQuestion==2){
					handleObj.title = '请通过火灾报警控制器，查看火警信息的具体部位'
				}
				this.$showModal2({
					title: '确认提交？'
				}).then(res=>{
					
					fzQuestion(handleObj).then(res => {
						if (res.code == 200) {
							that.allScore +=score
							that.result = null
							uni.hideLoading()
							if ((that.examType==1&&that.showQuestion <4)||(that.examType==2&&that.showQuestion<2) ) {
								that.showQuestion += 1
								that.f5Flag = false
								that.bUrl = baseUrl + "/static/image/jk/2-1.jpg"
								that.showPic = 1
								that.startTime = new Date().getTime()/1000
							} else  {
								let pages = getCurrentPages()
								let prevPage = pages[pages.length -2] 
								prevPage.$vm.status2 = true
								prevPage.$vm.addScore(that.allScore)
								uni.navigateBack()
							}
						}
					})
						
				});
			},
			turnF5Change() {
				this.f5Flag = true
			},
			closeBack() {
				this.bUrl = baseUrl + "/static/image/jk/2-1.jpg"
				this.showPic = 1
			},
			showDialog() {
				// this.showFlag = true
				this.bUrl = baseUrl + "/static/image/jk/2-2.jpg"
				this.showPic = 2
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					this.widthBl = widthBl
					this.heightBl = heightBl
					this.writeBox.width = 100 * widthBl + 'px'
					this.writeBoxLeft = 650 * widthBl + 'px'
					this.writeBoxTop = 420 * heightBl + 'px'
					this.writeBox.height = 100 * heightBl + 'px'
					this.showInfoBox.left = 1121*widthBl+'px'
					this.showInfoBox.top = 95*heightBl+'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkC/jkC'
				})
			},
			lastTask() {
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
			height:100%;
			position: absolute;
			left:0;
			top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position:absolute;
					left:30px;
					bottom:0px
				}

				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 0px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			// border:1px solid green;
			width: 100px;
			height: 100px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.answerBox {
			position: absolute;
			left: 35px;
			top:0%;
			background: #fff;
			color: #000;
			// width: 25%;
			font-size:2vh;
			.answerTit {
				background: orange
			}
		}

		.answerSelect {
			padding: 10px 0;
			box-sizing: border-box;
		}

		.showInfoBox {
			position: absolute;
			// background: #fff;
			color: #000;
			font-size: 1.5vh;
		}
		.whiteFont{
			color:#fff
		}
	}
</style>